<template>
  <div class="charge-container">
    <template>
      <el-table
        :data="vipProductList"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          align="center"
          label="产品图片"
          prop="imageUrl"
          width="130"
        >
          <!-- 插槽作用域 -->
          <template v-slot="{ row }">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="row.imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="productName" align="center" label="产品名称">
        </el-table-column>
        <el-table-column prop="description" align="center" label="产品描述">
        </el-table-column>
        <el-table-column prop="price" align="center" label="价格(元)">
        </el-table-column>
        <el-table-column prop="inventory" align="center" label="库存">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              v-isBuy="row.inventory"
              icon="iconfont icon-vip3"
              @click="pre_order(row)"
              >充值</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import * as payApi from '@/api/pay'
export default {
  directives: {
    isBuy: {
      // 库存为0 要禁用按钮
      inserted(el, binding) {
        // console.log(el, binding)
        if (binding.value == 0) {
          // 库存如果是0
          // 给元素加上 is-disabled 类名
          // 保存元素之前的类名
          let oldClassName = el.className
          // 多个类型中间要加上空格
          el.className = oldClassName + ' is-disabled' // 视觉上的禁用 elementUi 中的样式
          el.disabled = true // 真正的禁用按钮
        }
      }
    }
  },
  meta: {
    title: 'vipCharge',
    icon: 'iconfont icon-chongzhi' //存菜单对应的图标的类名
  },
  data() {
    return {
      loading: true,
      vipProductList: [],
      loading: 'true' // 定义加载动画
    }
  },
  async created() {
    // 打开加载动画
    this.loading = true
    // 发起请求, 获取vip商品
    let res = await payApi.getVipProduct()
    // console.log(res)
    // 关闭加载动画
    this.loading = false
    this.vipProductList = res.data.data
  },
  methods: {
    pre_order(row) {
      // 获得当前这一行得 product_id 产品id
      // console.log(row)
      // 点击按钮打开 this.$confirm 提示
      this.$confirm('您正在充值' + row.description, '购买提示', {
        type: 'info'
      })
        .then(() => {
          // 点击了确定按钮
          // 1. 要把当前的产品对象存到vuex中, 定义的字段 currentProduct
          this.$store.commit('SET_CURRENTPRODUCT', row)
          // 2. 跳转到下单页面 preorder
          this.$router.push({ name: 'preorder' })
        })
        .catch(() => {
          // 点击了取消按钮
          this.$message.warning('已取消购买')
        })
    }
  }
}
</script>

<style scoped lang="less">
.el-avatar {
  /deep/ img {
    width: 100%;
  }
  height: 30px !important;
  background-color: #fff;
}
.el-button--primary {
  background-color: #05a000;
}
</style>
